/*
 * @Author: your name
 * @Date: 2020-12-10 18:04:45
 * @LastEditTime: 2020-12-17 20:42:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\phpStudy\WWW\proj_steam\src\js\index.js
 */

require(['../config'], () => {
    require(['template', 'swiper', 'jquery', 'header', 'footer', 'nav'], (template, Swiper) => {
        class Index {
            constructor() {
                this.getData()
                this.newSwiper()
            }
            // 使用 rap2 模拟数据
            getData() {
                $.get('/api/app/mock/273331/index/games', res => {
                    if (res.code === 200) {
                        $('#focusGames').html(template('focusGamesTemplate', { focusGame: res.focusGame }))
                        $('#row1games').html(template('row1Template', { row1Game: res.recGame.row1 }))
                        $('#row2games').html(template('row2Template', { row2Game: res.recGame.row2 }))
                        $('#row3games').html(template('row3Template', { row3Game: res.recGame.row3 }))
                        $('#row4games').html(template('row4Template', { row4Game: res.recGame.row4 }))
                    }
                })
            }
            newSwiper() {
                // 精品系列的轮播图
                var series_swiper = new Swiper('.focus-series-goods > .swiper-container', {
                    slidesPerView: 3,
                    spaceBetween: 20,
                    slidesPerGroup: 3,
                    loop: true,
                    loopFillGroupWithBlank: true,
                    pagination: {
                        el: '.focus-series-goods > .swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.focus-series-goods > .swiper-button-next',
                        prevEl: '.focus-series-goods > .swiper-button-prev',
                    },
                });

                // 游戏类型的轮播图
                var type_swiper = new Swiper('.games-type-goods > .swiper-container', {

                    spaceBetween: 10,

                    loop: true,
                    pagination: {
                        el: '.games-type-goods > .swiper-pagination',
                        clickable: true,
                    },
                    effect: 'fade',
                    fadeEffect: {
                        crossFade: true,
                    },
                    navigation: {
                        nextEl: '.games-type-goods > .swiper-button-next',
                        prevEl: '.games-type-goods > .swiper-button-prev',
                    },
                });
            }
        }
        return new Index()

    })
})